<template>
	<view>
		<view v-if="this.userInfo.sign_status == 1 || this.sign_status==2">
			<view class="ptb12 plr15" style="background-color: #F8E6E7;" v-if="this.userInfo.sign_status==1">
				<image src="../../static/images/wallet/source.png" mode="" style="width: 27upx;height: 21upx;"></image>
				<text class="ft12 gray6 ml5" style="color: #F44A42;">{{$t('mine').首次提现需要电签完成实名认证}}</text>
			</view>
			<view class="ptb12 plr15" style="background-color: #F8E6E7;" v-if="this.sign_status==2">
				<image src="../../static/images/wallet/source.png" mode="" style="width: 27upx;height: 21upx;"></image>
				<text class="ft12 gray6 ml5" style="color: #F44A42;">{{$t('mine').注册个体户需要电签完成实名认证}}</text>
			</view>
		</view>
		<view class="ptb12 plr15" v-else>
			<image src="../../static/images/wallet/sourcegray.png" mode="" style="width: 27upx;height: 21upx;"></image>
			<text class="ft12 gray6 ml5">{{$t('mine').当前绑定}} {{true_namey}} {{bank_numy}}</text>
		</view>

		<!-- 大陆 -->
		<view v-if="country==0">
			<view class="bgWhite plr15 ft15">
				<view class="" v-if="this.userInfo.sign_status==1">
					<view class="txt1">
						<text class="mr5">{{$t('mine').上传身份证照片}}</text>
						<image src="../../static/images/wallet/gantanhao.png" mode="" class="icon1"
							@click="is_show3=true">
						</image>
					</view>
					<view class="box1 mt5">
						<view class="bg1">
							<image src="../../static/images/wallet/renxiangmian.png" mode="" class="img1"
								@click="is_show1=!is_show1"></image>
							<view class="bg2" v-show="is_show1">
								<image src="../../static/images/wallet/delete1.png" mode="" class="img2"></image>
							</view>
						</view>
						<view class="bg1">
							<image src="../../static/images/wallet/guohuimian.png" mode="" class="img1"
								@click="is_show2=!is_show2"></image>
							<view class="bg2" v-show="is_show2">
								<image src="../../static/images/wallet/delete1.png" mode="" class="img2"></image>
							</view>
						</view>
					</view>
					<view class="box1 text-center">
						<view class="txt2">{{$t('mine').身份证人像面}}</view>
						<view class="txt2">{{$t('mine').身份证国徽面}}</view>
					</view>
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').真实姓名}}</view>
					<input @blur="saveInfo()" v-model="username" type="text" class="flex1 h50"
						:placeholder="$t('mine').输入您的真实姓名" placeholder-class="placeholderStyle"
						:disabled="!(this.userInfo.sign_status == 1 || this.sign_status==2)"
						:class="!(this.userInfo.sign_status == 1 || this.sign_status==2)?'gray9':''" />
				</view>
				<view class="align-center">
					<view class="txt">{{$t('mine').身份证号}}</view>
					<input @blur="saveInfo()" v-model="id_num" type="text" class="flex1 h50"
						:placeholder="$t('mine').输入有效身份证号" placeholder-class="placeholderStyle"
						:disabled="!(this.userInfo.sign_status == 1 || this.sign_status==2)"
						:class="!(this.userInfo.sign_status == 1 || this.sign_status==2)?'gray9':''" />
				</view>
			</view>
			<view class="bgWhite plr15 ft15 mt10">
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').开户银行}}</view>
					<input @blur="saveInfo()" v-model="bank_name" type="text" class="flex1 h50"
						:placeholder="$t('mine').输入开户银行" placeholder-class="placeholderStyle" />
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').银行卡号}}</view>
					<input @blur="saveInfo()" v-model="bank_num" type="number" class="flex1 h50"
						:placeholder="$t('mine').输入银行卡号" placeholder-class="placeholderStyle" />
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('index').手机号}}</view>
					<input @blur="saveInfo()" v-model="userInfo.phone" type="number" class="flex1 h50"
						:placeholder="$t('mine').输入手机号" placeholder-class="placeholderStyle" />
				</view>
				<view class="align-center">
					<view class="txt">{{$t('set').验证码}}</view>
					<input v-model="captcha" type="number" class="flex1 h50" :placeholder="$t('mine').输入验证码"
						placeholder-class="placeholderStyle" />
					<view class="radius4 bdlight tc ptb3 red ft12 plr8" @click="getCode()">
						{{ timeDown > 0 ? timeDown + 's' : $t('login').获取验证码 }}
					</view>
				</view>
			</view>
		</view>
		<!-- 港澳 -->
		<view v-if="country==1&&this.userInfo.sign_status==1" class="box2">
			<view class="bgWhite plr15 ft15">

				<view class="bdbe news-top">
					<view class="txt">{{$t('mine').国籍}}</view>
					<view class="bu1" @click="chooselist(1)">
						<view class="ft14 mr10 choose2"><text
								:class="{ choose1: nationality==''}">{{nationality==''?$t('mine').请选择:nationality}}</text>
						</view>
						<image src="../../static/images/mine/icon/arrowright.png" mode="aspectFill"
							style="width: 10rpx;height: 18rpx;"></image>
					</view>
				</view>
				<view class=" news-top">
					<view class="txt">{{$t('mine').证件类型}}</view>
					<view class="bu1" @click="chooselist(2)">
						<view class="ft14 mr10 choose2"><text
								:class="{ choose1: documents==''}">{{documents==''?$t('mine').请选择:documents}}</text>
						</view>
						<image src="../../static/images/mine/icon/arrowright.png" mode="aspectFill"
							style="width: 10rpx;height: 18rpx;"></image>
					</view>
				</view>
			</view>

			<view class="bgWhite plr15 ft15 mt10">
				<view class="bdbe" style="padding-bottom: 43upx;">
					<view class="txt1">
						<view class="mr5">{{$t('mine').拍摄上传证件照片}}</view>
						<image src="../../static/images/wallet/gantanhao.png" mode="" class="icon1"
							@click="is_show3=true">
						</image>
					</view>
					<view class="box1 mt5">
						<view class="bg1">
							<image :src="front_img||'../../static/images/wallet/renxiangmian.png'" mode="aspectFill" class="img1"
								@click="chooseImage(1)"></image>
							<view class="bg2" v-show="is_show1">
								<image src="../../static/images/wallet/delete1.png" mode="" class="img2"></image>
							</view>
						</view>
						<view class="bg1" v-show="is_show6">
							<image :src="back_img||'/static/images/wallet/guohuimian.png'" mode="aspectFill" class="img1"
								@click="chooseImage(2)"></image>
							<view class="bg2" v-show="is_show2">
								<image src="../../static/images/wallet/delete1.png" mode="" class="img2"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').真实姓名}}</view>
					<input @blur="" v-model="username" type="text" class="flex1 h50" :placeholder="$t('mine').请输入真实姓名"
						placeholder-class="placeholderStyle" />
				</view>
				<view class="align-center bdbe">
					<view class="txt">{{$t('mine').证件号码}}</view>
					<input @blur="" v-model="id_num" type="number" class="flex1 h50"
						:placeholder="$t('mine').输入证件号码" placeholder-class="placeholderStyle" />
				</view>
				<view class="bdbe news-top">
					<view class="txt">{{$t('mine').性别}}</view>
					<view class="bu1" @click="chooselist(3)">
						<view class="ft14 mr10 choose2"><text
								:class="{ choose1: gender==''}">{{gender==''?$t('mine').请选择:gender}}</text></view>
						<image src="../../static/images/mine/icon/arrowright.png" mode="aspectFill"
							style="width: 10rpx;height: 18rpx;"></image>
					</view>
				</view>
				<view class="bdbe news-top">
					<view class="txt">{{$t('mine').出生日期}}</view>
					<view class="bu1" @click="is_show5=true">
						<view class="ft14 mr10 choose2"><text
								:class="{ choose1: birth==''}">{{birth==''?$t('mine').请选择:birth}}</text></view>
						<image src="../../static/images/mine/icon/arrowright.png" mode="aspectFill"
							style="width: 10rpx;height: 18rpx;"></image>
					</view>
				</view>
			</view>
		</view>

		<mix-button ref="confirmBtn" :text="$t('common').确认" marginTop="55rpx" @onConfirm="submit"></mix-button>

		<view class="mt20 gray6 plr15 ft12" v-if="this.userInfo.sign_status == 1 || this.sign_status==2">
			{{$t('mine').说明您在提交注册时}}
		</view>
		<view class="mt20 gray6 plr15 ft12" v-else>
			{{$t('mine').说明修改银行卡}}
		</view>

		<!-- 身份证上传要求弹窗 -->
		<u-overlay :show="is_show3" @click="is_show3 = false" opacity=".4">
			<view class="t-box">
				<view class="txt3" style="" @tap.stop>
					<view class="titl1">{{$t('mine').身份证上传要求}}</view>
					<view class="main">{{$t('mine').身份证上传要求内容}}</view>
					<image src="../../static/images/wallet/show-right.png" mode="" class="img1"></image>
					<view class="bu-konw" @click="know()">
						{{$t('mine').我知道了}}
					</view>

				</view>
			</view>
		</u-overlay>

		<!-- 国籍地区选择器 -->
		<u-picker :show="is_show4" :columns="list_now" @confirm="bu1" @cancel="is_show4=false" confirmColor="#F44A42"
			cancelColor="#333333" @close="is_show4=false" closeOnClickOverlay></u-picker>
		<!-- 日期选择器 -->
		<u-datetime-picker :show="is_show5" v-model="time_now" mode="date" @confirm="bu2" :minDate="mindate"
			confirmColor="#F44A42" :maxDate="maxdate" @cancel="is_show5=false" @close="is_show5=false"
			closeOnClickOverlay ref="datetimePicker"></u-datetime-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//新增开始
				front_img:'',
				back_img:'',
				country: 0, //0国内，1港澳
				is_show1: false, //第一个删除按钮显示、隐藏
				is_show2: false, //第二个删除按钮显示、隐藏
				is_show3: false, //上传身份证要求弹窗显示、隐藏
				is_show4: false, //国籍地区选择器弹出、收起
				is_show5: false, //日期选择器弹出、收起
				is_show6: true, //第二张上传图片的显示与隐藏
				imageList:[],
				nationality: '',
				documents: '',
				gender: '',
				birth: '',
				list_now: [],
				list1: [
					['中国香港', '中国澳门', '中国台湾']
				],
				list2: [
					['通行证', '护照']
				],
				list3: [
					['男', '女']
				],
				mindate: Number(new Date('1920-01-01')),
				maxdate: Number(new Date()),
				time_now: Number(new Date()),
				//新增结束

				username: '',
				true_namey: '',
				id_num: '',
				bank_name: '',
				bank_num: '',
				bank_numy: '',
				bank_phone: '',
				captcha: '',
				timeDown: "",
				isbind: '',
				sign_status: "",
				bankInfo: {}
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		onLoad(options) {
			if (options.val && options.val == 1) {
				this.country = 1
			} else {
				this.country = 0
			}
			// this.true_name = this.userInfo.true_name
			// this.id_num = this.userInfo.id_num
			// this.brank_name = this.userInfo.brank_name
			// this.brank_num = this.userInfo.brank_num
			// this.brank_phone = this.userInfo.phone
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onShow() {
			// this.true_name = this.userInfo.true_name
			// this.id_num = this.userInfo.id_num
			// this.brank_name = this.userInfo.brank_name
			// this.brank_num = this.userInfo.brank_num
			// this.brank_phone = this.userInfo.phone
			// console.log(this.userInfo.sign_status,this.sign_status)	
			this.$store.dispatch('getuserInfo')


		},
		watch: {
			
			userInfo: {
				handler(nVal, oVal) {

					if (this.userInfo.sign_status == 1) {
						uni.setNavigationBarTitle({
							title: this.$t('mine').电签
						})
						if (uni.getStorageSync('bingCardInfo')) {
							let bingCardInfo = uni.getStorageSync('bingCardInfo')
							this.username = bingCardInfo.username
							this.id_num = bingCardInfo.id_num
							this.bank_name = bingCardInfo.bank_name
							this.bank_num = bingCardInfo.bank_num
							this.userInfo.phone = bingCardInfo.bank_phone
						}
					} else {
						uni.setNavigationBarTitle({
							title: this.$t('mine').换绑银行卡
						})
						this.getbankAPI()
					}
				}

			}
		},
		methods: {
			// 删除图片
			deletePic(index) {
				this.imageList.splice(index, 1)
			},
			randNum(min, max) {
				return Math.floor(Math.random() * (max - min)) + min + Date.now();
			},
			// 新增图片
			chooseImage(type) {
				// let count = 9 - this.imageList.length;
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						let key;
						// #ifdef MP-WEIXIN  
						key = '.' + chooseImageRes.tempFiles[0].path.toLowerCase().split('.')[1];
						// #endif
						// #ifdef H5
						key = chooseImageRes.tempFiles[0].name;
						// #endif
						this.$api.qiniuToken().then((res) => {
							let uploadMsg = res.data;
							for (var i = 0; i < chooseImageRes.tempFiles.length; i++) {
								let uniqueCode = this.randNum(100, 5);
								let formData = {
									'key': 'userfile/' + uniqueCode + key,
									'token': uploadMsg.token
								}
								let options = {
									filePath: chooseImageRes.tempFilePaths[i],
									name: 'file',
									formData: formData,
								}
								this.$api.uploadImg(options).then((res) => {
									let partImgUrl = uploadMsg.url + '/' + res;
									if (type == 1) {
										this.front_img = partImgUrl
									} else{
										this.back_img = partImgUrl
									}
									// if(this.imageList.length<9){
									// 	this.imageList.push(partImgUrl);
									// }
									// console.log(this.imageList)
								})
							}
						})
			
					},
					fail(err) {
						console.log("err" + err)
					},
				});
			},
			// 选择出生日期
			bu2(e) {
				console.log('confirm', e.value) //返回时一个时间戳
				//写法2：mode为data的时候，需要用js转化为格式化的年月日在进行组合
				const date = new Date(e.value)
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
				const day = date.getDate().toString().padStart(2, '0');

				this.birth = `${year}年${month}月${day}日`; // 组合成 YYYY-MM-DD 格式

				this.is_show5 = false
			},
			//可以通过formatter参数编写自定义格式化规则
			formatter(type, value) {
				// console.log(type)
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}

				return value
			},
			//切换选项列表
			chooselist(val) {
				if (val == 1) {

					this.list_now = this.list1

				} else if (val == 2) {

					this.list_now = this.list2

				} else {

					this.list_now = this.list3

				}
				this.is_show4 = true
			},
			//选择国籍地区or证件类型or性别
			bu1(value1) {
				if (this.list_now == this.list1) {
					
					this.nationality = value1.value[0]
					// if (this.nationality == '中国香港'||this.nationality == '中国澳门' ) {
					// 	this.list2 = [
					// 		[
					// 			{
					// 				label: '港澳居民来往内地通行证',
					// 				// 其他属性值
					// 				id: 2
					// 			},
					// 			{
					// 				label: '护照',
					// 				// 其他属性值
					// 				id: 3
					// 			},
					// 			{
					// 				label: '港澳居民居住证',
					// 				// 其他属性值
					// 				id: 9
					// 			}
					// 		]
					// 	]
					// } else if(this.nationality == '中国台湾'){
					// 	this.list2 = [
					// 		[
					// 			{
					// 				label: '台湾居民来往大陆通行证',
					// 				// 其他属性值
					// 				id: 2
					// 			},
					// 			{
					// 				label: '台湾居民居住证',
					// 				// 其他属性值
					// 				id: 3
					// 			}
					// 		]
					// 	]
					// }

				} else if (this.list_now == this.list2) {
					if (value1.value[0] == '护照') {
						this.is_show6 = false
					} else {
						this.is_show6 = true
					}
					this.documents = value1.value[0]

				} else {

					this.gender = value1.value[0]

				}

				this.is_show4 = false
			},
			know() {
				this.is_show3 = false
			},
			// 保存填写的信息
			saveInfo() {
				let bingCardInfo = {
					username: this.username,
					id_num: this.id_num,
					bank_name: this.bank_name,
					bank_num: this.bank_num,
					bank_phone: this.userInfo.phone,
				}
				uni.setStorageSync('bingCardInfo', bingCardInfo)
			},
			//获取验证码
			getCode() {
				if (this.timeDown > 0) {
					return;
				}
				this.$utils.throttle(() => {
					const phone = this.userInfo.phone;
					if (!this.userInfo.phone) {
						return this.$utils.msg(this.$t('login').请输入手机号码);
					}
					this.$api.smsSend({
						phone: phone,
						event: 'bindbrank',

					}).then((res) => {
						if (res && res.code == 1) {
							this.$utils.msg(res.msg);
							this.countDown(60);
						}
					})
				}, 2000)
			},
			//倒计时
			countDown(timer) {
				timer--;
				this.timeDown = timer;
				if (timer > 0) {
					setTimeout(() => {
						this.countDown(timer);
					}, 1000)
				}
			},
			// 换绑银行卡信息
			async submit() {
				if (!this.username) {
					return this.$utils.msg(this.$t('mine').请输入真实姓名)
				}
				console.log(!this.id_num)
				if (!this.id_num) {
					return this.$utils.msg(this.$t('mine').输入有效身份证号)
				}
				if (this.userInfo.area==1) {
					if (!this.bank_name) {
						return this.$utils.msg(this.$t('mine').输入开户银行)
					}
					if (!this.bank_num) {
						return this.$utils.msg(this.$t('mine').输入银行卡号)
					}
					if (!this.userInfo.phone) {
						return this.$utils.msg(this.$t('login').请输入手机号码)
					}
					if (!this.captcha) {
						return this.$utils.msg(this.$t('login').请输入验证码)
					}
					let infoObj = {
						username: this.username,
						id_num: this.id_num,
						bank_name: this.bank_name,
						bank_num: this.bank_num,
						bank_phone: this.userInfo.phone,
						captcha: this.captcha
					}
				} else{
					
				}
				const res = await this.$api.bindbrank(infoObj)
				// return
				if (res && res.code == 1) {
					// this.userInfo.sign_status == 2
					if (res.data.sign_status == 2) {
						//提现
						// this.navTo('/pages/wallet/index')
						this.navTo('/pages/wallet/withdraw')
					} else {
						//电签
						if(this.country==1){
							//港澳进度
							this.getHTContractUrl()
						}else{
							// 国内
							this.getContractUrlAPI(1)
						}
						
					}
				}
			},
			async getHTContractUrl(cert_type) {
				let obj = {
					username: this.username,
					birthday:this.birth,
					sex:this.gender,
					nationality:this.nationality,
					cer_type:0,
					id_num: this.id_num,
					// bankcard: this.bank_name,
					// phone: this.bank_phone,
					// cert_type:1,
					back_img:this.back_img,
					front_img:this.front_img
				}
				 
				const res = await this.$api.getHTContractUrl({
					cert_type: cert_type
				})
				if (res && res.code == 1) {
					this.navTo('/pages/wallet/progress?val=1')
					// location.href = res.data.url
				}
				else{
					this.$utils.msg(res.msg)
				}
			},
			async getContractUrlAPI(cert_type) {
				let obj = {
					name: this.username,
					idcard: this.id_num,
					bankcard: this.bank_name,
					phone: this.bank_phone,
					cert_type:1
				}
				 
				const res = await this.$api.getContractUrl({
					cert_type: cert_type
				})
				if (res && res.code == 1) {
					location.href = res.data.url
				}
			},
			// 获取回显的银行卡信息
			async getbankAPI() {
				const res = await this.$api.getbank()
				if (res && res.code == 1) {
					this.bankInfo = res.data
					this.username = this.bankInfo.username
					this.id_num = this.bankInfo.id_num
					this.bank_name = this.bankInfo.bank_name
					this.bank_num = this.bankInfo.bank_num
					this.userInfo.phone = this.bankInfo.bank_phone
					let qfour = this.bank_num?.substring(0, 4)
					let hfour = this.bank_num?.substring(this.bank_num.length - 4)
					this.bank_numy = qfour + '****' + hfour
					let qname = this.username?.substring(0, 1)
					this.true_namey = qname + this.username?.substring(1).replace(/./g, '*');
				}
			}
		}
	}
</script>

<style lang="scss">
	.placeholderStyle {
		font-size: 30upx !important;
	}

	.tip {
		background-color: rgba(242, 60, 75, 0.1);
	}

	.txt {
		width: 170upx
	}

	.txt1 {
		width: 100%;
		height: 100upx;
		// line-height: 100upx;
		display: flex;
		justify-content: start;
		align-items: center;

		.icon1 {
			width: 26upx;
			height: 26upx;
			margin-top: -4upx;
		}
	}

	.box1 {
		display: flex;
		justify-content: space-between;

		.bg1 {
			width: 308upx;
			height: 191upx;
			background-image: url("../../static/images/wallet/kuang.png");
			background-size: 308upx 191upx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.img1 {
				width: 274upx;
				height: 157upx;
			}

			.bg2 {
				background-color: #ffffff;
				border-radius: 50%;
				width: 32upx;
				height: 32upx;
				position: absolute;
				right: 26upx;
				top: 26upx;
			}

			.img2 {
				width: 32upx;
				height: 32upx;
			}
		}

	}

	.txt2 {
		width: 308upx;
		height: 100upx;
		line-height: 100upx;
		font-size: 26upx;
	}

	.text-center {
		text-align: center;
	}

	.t-box {
		height: 100vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;

		.txt3 {
			width: 674upx;
			// height: 512upx;
			background-color: #ffffff;
			margin-top: -260upx;
			padding: 45upx 42upx;
			border-radius: 30upx;

			.titl1 {
				font-size: 32upx;
				// line-height: 60upx;
			}

			.main {
				margin-top: 10upx;
				font-size: 24upx;
				color: #666666;
				letter-spacing: 2upx;
				line-height: 40upx;
			}

			.img1 {
				width: 590upx;
				height: 128upx;
				margin-top: 38upx;
			}

			.bu-konw {
				margin: 0 auto;
				width: 420upx;
				height: 90upx;
				border-radius: 50upx;
				border: 2upx solid #F44A42;
				text-align: center;
				line-height: 86upx;
				margin-top: 42upx;
				font-size: 32upx;
				color: #F44A42;
			}
		}

	}

	.box2 {
		.bu1 {
			display: flex;
			justify-content: space-between;
			flex: 1;
			align-items: center;
		}

		.choose1 {
			color: #B0B0B0;
		}

		.choose2 {
			color: #333333;
		}

		.news-top {
			line-height: 99upx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>